<template>
  <div class="shopcont container">
    <div class="shopcont-header">
      <div class="title">分类：</div>
      <edu-category @patch="handleCategory"></edu-category>
    </div>
    <el-skeleton class="skeleton-wrap" :loading="loading" :count="10">
      <template slot="template">
        <div class="skeleton-item">
          <edu-image></edu-image>
          <div class="content">
            <el-skeleton-item variant="h3" class="title" />
            <el-skeleton-item variant="p" class="price" />
            <div class="desc">
              <el-skeleton-item variant="text" class="text" />
              <el-skeleton-item variant="text" class="text" />
            </div>
          </div>
        </div>
      </template>
      <template>
        <div class="shopcont-list">
          <div
            class="shopcont-item"
            v-for="item in productList"
            :key="item.id"
            @click="handleShopItem(item.id)"
          >
            <edu-image :src="item.cover_url" fit="cover"></edu-image>
            <div class="title">
              {{ item.title }}
            </div>
            <div class="price" v-if="item.credit_price > 0 && item.cash_price > 0">
              <span>{{ item.credit_price }}</span
              >积分+{{ priceSymbol }}<span>{{ item.cash_price }}</span>
            </div>
            <div class="price" v-else-if="item.credit_price > 0">
              <span>{{ item.credit_price }}</span
              >积分
            </div>
            <div class="price" v-else-if="item.cash_price > 0">
              {{ priceSymbol }}<span>{{ item.cash_price }}</span>
            </div>
            <div class="free" v-else>免费</div>
            <div class="desc">
              <div class="ex">{{ item.sale_count }}人兑换</div>
              <div class="num" v-if="item.scribing_price > 0">
                {{ priceSymbol }}{{ item.scribing_price }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-skeleton>
    <edu-no-data v-if="productList.length == 0 && !loading"></edu-no-data>
    <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
  </div>
</template>

<script>
import EduCategory from './components/category'
import EduNoData from '@/components/EduNoData'
import EduPagination from '@/components/EduPagination'
import projectSetting from '@/settings/projectSetting.js'
import { mapState } from 'vuex'
export default {
  components: {
    EduCategory,
    EduNoData,
    EduPagination
  },
  data() {
    return {
      priceSymbol: projectSetting.appMoneySymbol,
      productList: [],
      loading: true,
      category: 0,
      recommend: 1,
      title: ''
    }
  },
  computed: {
    ...mapState({
      keyIndex: state => state.search.title
    })
  },
  watch: {
    keyIndex(n, o) {
      if (n != o) {
        this.title = n
        this.$store.dispatch('paginate/setPaginate', {
          currentPage: 1
        })
        this.getProductList()
      }
    }
  },
  methods: {
    getProductList() {
      this.$api.getMallProductList(
        {
          title: this.title,
          category: this.category,
          recommend: this.recommend,
          page: this.$store.getters['paginate/page'],
          count: 20
        },
        res => {
          const { data } = res
          this.productList = data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 20,
            total: data.total
          })
          setTimeout(() => {
            this.loading = false
          }, 50)
        }
      )
    },
    // 分页
    handleCurrentChange() {
      this.getProductList()
    },
    // 分类筛选
    handleCategory(val) {
      if (val == -1) {
        this.category = 0
        this.recommend = 1
      } else {
        this.category = val
        this.recommend = 0
      }

      this.$store.dispatch('paginate/setPaginate', {
        currentPage: 1
      })

      this.getProductList()
    },
    // 点击商品item
    handleShopItem(id) {
      this.$router.push({
        path: '/mall/details',
        query: {
          id
        }
      })
    }
  },
  mounted() {
    this.title = this.keyIndex
    this.getProductList()
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/hover.scss';
.shopcont {
  .shopcont-header {
    background: #ffffff;
    display: flex;
    padding: 20px 24px 6px;
    margin-top: 10px;
    .title {
      font-size: 14px;
      font-weight: 400;
      color: #909399;
      line-height: 26px;
      white-space: nowrap;
    }
    .skeleton-title {
      width: 42px;
    }
    .skeleton-list {
      flex: 1;
      margin-left: 10px;
    }
    .skeleton-item {
      width: 120px;
      margin-right: 10px;
      margin-bottom: 20px;
    }
  }
  .skeleton-wrap {
    margin-top: 20px;
    ::v-deep .el-skeleton {
      display: grid;
      grid-template-columns: repeat(5, 220px);
      grid-gap: 25px 25px;
    }
    .skeleton-item {
      background: #ffffff;
      padding-bottom: 20px;
      border-radius: 4px;
      .el-image {
        width: 100%;
        height: 220px;
        display: block;
      }
      .content {
        padding: 0 15px;
      }
      .title {
        margin-top: 10px;
        width: 60%;
      }
      .price {
        margin-top: 10px;
      }
      .desc {
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
      }
      .text {
        width: 60px;
      }
    }
    ::v-deep .shopcont-list {
      display: grid;
      grid-template-columns: repeat(5, 220px);
      grid-gap: 25px 25px;
    }
    .shopcont-item {
      background: #ffffff;
      padding-bottom: 20px;
      border-radius: 4px;
      overflow: hidden;
      @include prefixed(transition-duration, 0.3s);
      &:hover {
        box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.05);
        transform: translateY(-6px);
      }
      .el-image {
        width: 100%;
        height: 220px;
        display: block;
        cursor: pointer;
      }
      .title {
        font-size: 16px;
        font-weight: 400;
        color: $text-color-import;
        line-height: 20px;
        padding: 0 15px;
        margin-top: 10px;
        @include ellipsis();
        cursor: pointer;
      }
      .price {
        font-size: 13px;
        color: $text-color-price;
        line-height: 27px;
        margin-top: 10px;
        padding: 0 15px;
        display: flex;
        align-items: flex-end;
        span {
          font-size: 18px;
          font-weight: 600;
        }
      }
      .free {
        font-size: 16px;
        color: $text-color-free;
        line-height: 27px;
        margin-top: 10px;
        padding: 0 15px;
      }
      .desc {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        margin-top: 15px;
        padding: 0 15px;
        .ex {
          color: $text-color-price;
        }
        .num {
          color: $text-color-auxiliary;
          text-decoration: line-through;
        }
      }
    }
  }
}
</style>
